<template>
  <div>
    <!--头部-->
    <van-nav-bar
        title="MBTI推荐"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <!--侧边栏-->
    <div style="display: inline-block;height: 100vh;overflow: scroll;position: fixed;top: 46px">
      <van-sidebar v-model="activeSider" @change="changeDepartment">
        <van-sidebar-item v-for="recDep in recDepartmentList" :key="recDep.id"  :title="recDep.name"/>
      </van-sidebar>
    </div>
    <!--内容区-->
    <div style="margin-left: 100px;margin-top:20px;width: 80%">
      <div style="width: 180px" @click="majorBtn(major.id)" v-for="major in majorList" :key="major.id">
        {{major.name}}
        <van-divider />
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "RecMajor",
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      activeSider: -1,
      recDepartmentList:[],
      majorList:[],
    }
  },
  methods: {
    //点击学科
    majorBtn(majorId){
      //路由跳转推荐学校页
      this.$router.push({
        name:'RecUniversity',
        params:{
          userId:this.user.id,
          majorId:majorId
        }
      })
    },
    //切换学科
    changeDepartment(index) {
      this.majorList = this.recDepartmentList[index].majorList
    },
    onClickLeft() {
      this.$router.push('/mbti')
    },
  },
  created() {
    this.request.post('/api/department/selectDepartmentByRecommend', this.user).then(res => {
      if (res.code === 1) {
        this.recDepartmentList = res.data
      }
    })
  }
}
</script>

<style scoped>
.van-sidebar-item--select::before {
  background-color: #1989fa;
}
</style>